/**
 * 远程控制 - 装车控制 - 参数设置
 * @author xiaoxujs
 */

import { useLocation, useNavigate } from "react-router-dom";

import { LCPTItle, LoadingControlParameterSettingsBox } from "./style";
import { Button, ConfigProvider, message, Switch } from "antd";
import { useWindowFontSize } from "../../../assets/fun/Antd/configprovider";
import { useCallback, useEffect, useState } from "react";
import { ITlplTLaneQueryLaneParam } from "../../../type/remoteControl/loadingControlList";
import { getTlplTLaneQueryLaneParam, getTlplTLaneUpdateLaneState } from "../api";

import SetJibenModule from "./components/SetJibenModule";
import { handleGetDictionaryItemValue } from "../../../assets/fun/DictionaryItem";
import { huopin } from "../../../assets/data";

import DaozhaModule from './components/DaozhaModule'; // 道闸模块
import PLCParamsModule from './components/PLCParamsModule'; // PLC参数模块
import LiveModule from './components/LiveModule'; // 直播参数模块
import LEDModule from './components/LEDModule'; // LED屏幕参数模块
import ZhuapaijiModule from './components/ZhuapaijiModule'; // 一次计量参数模块

const LoadingControlParameterSettings = () => {
    const navigate = useNavigate();
    const location = useLocation() as { state?: { id: string } };

    const [setJibenShow, setSetJibenShow] = useState(false); // 基本设置弹窗


    /**
     * 设置车道参数
     */
    const [laneParameters, setLaneParameters] = useState<ITlplTLaneQueryLaneParam>(); //车道参数
    // 车道数据
    const laneParametersFun = useCallback(async () => {
        if (location.state) {
            const { code, msg, data } = await getTlplTLaneQueryLaneParam({ laneId: location.state.id }) as { code: number, msg: string, data: ITlplTLaneQueryLaneParam };
            if (code === 20000) {
                setLaneParameters(data);
            } else {
                message.error(msg);
            }
        }
    }, [location.state]);

    useEffect(() => {
        laneParametersFun();
    }, [laneParametersFun])

    // 车道参数设置回调
    const handleChedaoSetCallback = () => {
        setSetJibenShow(false);
        laneParametersFun();
    }
    /**
 * 开启或者关闭装车站
 * @param id 装车站ID
 */
    const handleSwitch = async () => {
        if (location.state) {
            const { code, msg } = await getTlplTLaneUpdateLaneState({
                laneId: location.state.id,
                laneState: 0
            }) as { code: number, msg: string };
            if (code === 20000) {
                message.success('操作成功');
            } else {
                message.error(msg)
            }
        }
    }
    return <LoadingControlParameterSettingsBox>
        <ConfigProvider
            theme={{
                components: {
                    Switch: {
                        colorPrimary: '#02D154',
                        colorPrimaryHover: '#02D154',
                        trackHeight: useWindowFontSize(20),
                        handleSize: useWindowFontSize(16),
                        trackMinWidth: useWindowFontSize(34),
                        trackPadding: useWindowFontSize(2)
                    }
                }
            }}
        >
            <div>
                <div className="lgl-title-button-style">
                    <div className="lgl-title-button-style-nei">
                        装车控制
                    </div>
                </div>
            </div>
            <div className="goback-box">
                <span className="iconfont" onClick={() => navigate(-1)} >&#xe641;</span>
                <span>返回</span>
            </div>
            <LCPTItle>
                <div className="lcptitle-left-box">
                    <div className="gun"></div>
                    <div>基础信息</div>
                </div>
            </LCPTItle>
            <div className="zhuangchezhan-box">
                <div className="zcz-shang">
                    <div className="zcz-shang-left">
                        <span className="text">车道参数</span>

                        <div className="zhuangtai">使用状态：</div>

                        <Switch checked={laneParameters && laneParameters.laneState === 0} onChange={() => handleSwitch()} />
                        {laneParameters && laneParameters.laneState === 0 ? <span className="tourushiyong">投入使用</span> : <span className="tingzhishiyong">停止使用</span>}
                    </div>
                    <Button type="link" onClick={() => setSetJibenShow(true)}>设置参数</Button>
                </div>
                <div className="zcz-xia">
                    <div className="zcz-xia-item">
                        <span className="zcz-xia-item-title">装车站名称</span>
                        <span className="zcz-xia-item-value">{laneParameters && (laneParameters.laneName || '--')}</span>
                    </div>
                    <div className="zcz-xia-item">
                        <span className="zcz-xia-item-title">车道编号</span>
                        <span className="zcz-xia-item-value">{laneParameters && (laneParameters.laneNum || '--')}</span>
                    </div>
                    <div className="zcz-xia-item">
                        <span className="zcz-xia-item-title">限值(吨)</span>
                        <span className="zcz-xia-item-value">{laneParameters && (laneParameters.limitValue || '--')}</span>
                    </div>
                    <div className="zcz-xia-item">
                        <span className="zcz-xia-item-title">货品名称</span>
                        <span className="zcz-xia-item-value">{laneParameters && (handleGetDictionaryItemValue(huopin, laneParameters.product) || '--')}</span>
                    </div>
                </div>
            </div>
            {/* 道闸模块 */}
            <DaozhaModule laneId={location.state && location.state.id} />
            {/* plc参数 */}
            <PLCParamsModule laneId={location.state && location.state.id} />
            {/* 直播参数 */}
            <LiveModule laneId={location.state && location.state.id} />
            {/* LED屏幕参数 */}
            <LEDModule laneId={location.state && location.state.id} />
            {/* 抓拍相机参数 */}
            <ZhuapaijiModule laneId={location.state && location.state.id} />

        </ConfigProvider>
        {/* 基本参数设置 */}
        <SetJibenModule
            open={setJibenShow}
            handleSetPlcCallback={handleChedaoSetCallback}
            clickData={laneParameters}
            clickId={location.state?.id}
        />
    </LoadingControlParameterSettingsBox>
}

export default LoadingControlParameterSettings;
